<template>
	<div>
		<div style="top: 0;" :style="{
			position: sticky ? 'sticky' : 'relative'
		}">
			<div style="background-color: #fff;" v-show="title">{{ title }}</div>
			<div style="display: flex;font-size: 12px;" :style="tableStyle">
				<template v-for="(item, index) in columns">
					<div
						class="flex_width padding"
						v-if="item.fixed && item.fixed == 'left'"
						:style="item.style"
					>{{ item.title }}</div>
				</template>
				<div class="table_body" :style="{
					overflowX: 'hidden'
				}" ref="topBox">
					<template v-for="(item, index) in columns">
						<div
							v-if="!item.fixed || item.fixed !== 'left'"
							class="flex_width padding"
							:style="item.style"
						>{{ item.title }}</div>
					</template>
				</div>
			</div>
		</div>
		<div style="display: flex;" v-show="list && list.length >= 1">
			<template v-for="(item, index) in columns">
				<div v-if="item.fixed && item.fixed == 'left'" style="width: 100px;" :style="item.style">
					<template v-for="(row, indexRow) in list">
						<div class="table_body_item padding" :style="item.columnStyle">
							<slot :name="item.key" :row="row || {}" :index="indexRow">{{ row[item.key] }}</slot>
						</div>
					</template>
				</div>
			</template>
			<div class="table_body" ref="listBox">
				<template v-for="(item, index) in columns">
					<div v-if="!item.fixed || item.fixed !== 'left'" class="flex_width" :style="item.style">
						<template v-for="(row, indexRow) in list">
							<div class="table_body_item padding" :style="item.columnStyle">
								<slot :name="item.key" :row="row || {}" :index="indexRow">{{ row[item.key] }}</slot>
							</div>
						</template>
					</div>
				</template>
			</div>
		</div>
		<div class="nodata_box" v-show="!list || list.length == 0">
			<slot name="nodata"></slot>
		</div>
	</div>
</template>

<script>
export default {
	name: 'lyz-table',
	props: {
		tableStyle: {
			type: String,
			default: ''
		},
		border: {
			type: Boolean,
			default: false
		},
		title: {
			type: String,
			default: ''
		},
		columns: {
			type: Array,
			default: []
		},
		sticky: {
			type: Boolean,
			default: false
		},
		list: {
			type: Array,
			default: function () {
				return []
			}
		}
	},
	mounted () {
		this.$nextTick(() => {
			const dom = this.$refs.listBox
			const topBox = this.$refs.topBox
			dom.addEventListener('scroll', (e) => {
				topBox.scrollLeft = dom.scrollLeft
			})
		})
	}
}
</script>

<style scoped>
.table_body {
	overflow-x: auto;
	display: flex;
	width: 100%;
	background-color: #fff;
}

.table_body_row {
	display: flex;
	/* width: 200px; */
	/* height: 30PX;
    align-items: center;
    margin-bottom: 10px; */
}

.table_body_item {
	width: 100%;
	height: 30px;
	display: block;
	flex: 1;
	font-size: 14px;
	color: #494949;
	align-items: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.nodata_box {
	width: 100%;
	box-sizing: border-box;
}

.flex_width {
	flex-grow: 0;
	flex-shrink: 0;
	/* box-sizing: border-box; */
}

.padding {
	padding: 12px 0;
}
</style>
